<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>蜂巢tab切换实例</title>
    <meta http-equiv="keywords" content="">
    <meta http-equiv="description" content="">
    <meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
    <meta name="renderer" content="webkit">
    <style type="text/css">
    	body{
    		background-color: black;
    	}
        .Ct{
            width:1000px;
            margin:0 auto;
        }
        .ywPart1{
            width: 310px;
            margin: 0 auto;
            padding: 20px 10px 20px 30px;
        }

        /**蜂巢样式***/
        .hex {
            float: left;
            margin-left: 2px;
            margin-bottom: -18px;
            cursor: pointer;
        }
        .hex .hex_top {
            width: 0;
            border-bottom: 20px solid #f0ce8b;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
        .hex .hex_middle {
            width: 70px;
            height: 30px;
            line-height: 30px;
            background: #f0ce8b;
            text-align: center;
            font-family: "宋体";
            color: #333333;
        }
        .hex .hex_bottom {
            width: 0;
            border-top: 20px solid #f0ce8b;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
        .hex-row {
            clear: left;
        }
        .hex-row.even {
            margin-left: 38px;
        }
        .hex-row.odd {
            margin-right: 38px;
        }

        .hex.hexActive .hex_top {
            width: 0;
            border-bottom: 20px solid #86ccac;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
        .hex.hexActive .hex_middle {
            width: 70px;
            height: 30px;
            line-height: 30px;
            background: #86ccac;
            text-align: center;
            font-family: "宋体";
            color: #FFFFFF;
        }
        .hex.hexActive .hex_bottom {
            width: 0;
            border-top: 20px solid #86ccac;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
        a{
        	text-decoration: none;
        	color: #ff6600;
        	
        }
       marquee{
       	color: hsl(100,50%,50%);
       }
        /**蜂巢样式***/
    </style>
</head>
<body>
	<marquee behavior="alternate" direction="left" >作业·作业</marquee>
<div class="Ct">
	
    <div class="ywPart1" id="hexDiv">
        <!--
            描述：蜂巢
        -->
        <div class="hex hexActive" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">千图网</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="小米/index.html">小米商城</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex hex-row even" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex hex-row" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle"><a href="##">未知</a></div>
            <div class="hex_bottom"></div>
        </div>
        <div class="ClearFloat"></div>
    </div>
    
</div>

<script type="text/javascript" src="jquery.js"></script>
<script>
	$("marquee").css("color","hsl("+(Math.random()*360)+",50%,50%)")

    $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){
        $(this).addClass("hexActive");
        $(this).siblings("div[name='hexBlcok']").removeClass("hexActive");
    });
//  var count=0;
//  function addnew(){
//  	if($("marquee")==undefined){
//  		$("marquee").last().offset().top=0;
//  		console.log("gg")
//  	}else{
//  	  $("<marquee behavior="alternate" direction="">作业·作业</marquee>")
//  .append
//  		
//  	}
//  }
//  addnew()
</script>
</body>
</html>
